<!--
 * @Author: your name
 * @Date: 2019-11-08 17:11:07
 * @LastEditTime: 2019-12-17 00:14:59
 * @LastEditors: YJP
 * @Description: In User Settings Edit
 * @FilePath: \vue_et\src\components\HelloWorld.vue
 -->
<template>
  <div class="footnav">
    <router-link
      class="foot_item"
      tag="div"
      :to="item.path"
      v-for="(item,index) in navlist"
      :key="index"
    >
      <img class="foot_icon" :class="{'bless_icon':index == 2}" :src="item.icon" alt />
      <span class="f24">{{item.name}}</span>
    </router-link>
    <div class="blessing"></div>
  </div>
</template>

<script>
export default {
  name: "FootNav",
  data() {
    return {
      navlist: [
          {
          path: "/active",
          icon: require("../assets/images/nav/activity.svg")
        },
        {
          path: "/music",
          icon: require("../assets/images/nav/headphones.svg")
        },
        {
          path: "/add",
          icon: require("../assets/images/nav/add.svg")
        },
        {
          path: "/map",
          icon: require("../assets/images/nav/map.svg")
        },
        
        {
          path: "/chat",
          icon: require("../assets/images/nav/chat.svg")
        }
      ],
      active: 0
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.init_nav();
    });
  },
  methods: {
    init_nav() {
      let path = this.$route.fullPath;
      console.log("path", path);
      this.navlist.forEach((item, index) => {
        if (path.indexOf(item.path) > -1) {
          this.active = index;
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import '../assets/css/theme.less';
.blessing {
  position: absolute;
  width: 120px;
  height: 120px;
  z-index: -1;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: 50%;
}
.blessing::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: transparent;
  z-index: 0;
  border-radius: 30px 0%;
  left: -45px;
  top: 10px;
  border-bottom: 20px solid #fff;
}
.blessing::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 20px;
  background: transparent;
  z-index: 0;
  border-radius: 0% 30px;
  right: -45px;
  top: 10px;
  border-bottom: 20px solid #fff;
}
.footnav {
  display: flex;
  position: relative;
  justify-content: space-around;
  align-items: center;
  height: 100px;
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  box-sizing: border-box;
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.1));
  .foot_item {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: @primary;
    padding: 10px 0;
    box-sizing: border-box;
    .foot_icon {
      width: auto;
      height: 60px;
    }
    .bless_icon {
      width: 90px;
      height: 90px;
      margin-top: -20px;
    }
  }

  .router-link-active {
    // color: rgba(55, 0, 255, 0.521);
  }
}
</style>
